<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>唐僧
        <ul>
            <li>齐天大圣</li>
            <li>天蓬元帅</li>
            <li>卷帘大将</li>
        </ul>
    </li>
    <li>玉帝
        <ul>
            <li>太白金星</li>
            <li>二郎神</li>
            <li>托塔李天王</li>
        </ul>
    </li>
    <li>如来
        <ul>
            <li>观音</li>
            <li>降龙</li>
            <li>伏虎</li>
        </ul>
    </li>

</ul>
<script src="jquery.min.js"></script>
<script>
    $("li>ul").hide();
    $("body>ul>li").click(function () {
       $(this).children().toggle();
    })
</script>

</body>
</html>